<template>
  <el-aside width="240px" class="sidebar">
    <div class="sidebar-header">
      <h2>社区分类</h2>
    </div>
    <el-menu class="sidebar-menu" active-text-color="#10b981">
      <el-menu-item 
        v-for="(item, index) in menuItems" 
        :key="index"
        :class="{ 'is-active': activeIndex === `menu-${index}` }"
        @click="handleMenuSelect(item, `menu-${index}`)"
      >
        <component :is="item.icon" class="menu-icon" />
        <span>{{ item.label }}</span>
      </el-menu-item>
      <el-menu-item 
        class="publish-button" 
        :class="{ 'is-active': activeIndex === 'publish' }"
        @click="handlePublish"
      >
        <component :is="PlusCircle" class="menu-icon" />
        <span>我要发表</span>
      </el-menu-item>     
      <el-menu-item 
        :class="{ 'is-active': activeIndex === 'my-posts' }"
        @click="handleMyPosts"
      >
        <component :is="FileText" class="menu-icon" />
        <span>我发布的</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue';
import { PlusCircle, FileText } from 'lucide-vue-next';
import { useStore } from '../../store/index';

const store = useStore();
const props = defineProps({
  menuItems: Array,
  uploadHandler: Function
});

const emit = defineEmits(['showEditor', 'my-posts', 'menu-select']);

const activeIndex = ref('menu-0'); // 默认选中第一个菜单项

const handleMenuSelect = (item, index) => {
  activeIndex.value = index; // 更新选中状态
  emit('menu-select', item); // 触发父组件事件
  emit('showEditor', false);
  emit('backToList', false)
};

const handlePublish = () => {
  activeIndex.value = 'publish'; // 更新选中状态
  emit('showEditor', true); // 触发父组件事件
};

const handleMyPosts = () => {
  activeIndex.value = 'my-posts'; // 更新选中状态
  store.isUserList = true; // 更新 store 状态
  emit('my-posts'); // 触发父组件事件
  emit('showEditor', false);
};
</script>

<style scoped lang="scss">
.sidebar {
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  
  &-header {
    padding: 24px;
    h2 {
      color: #1f2937;
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      text-align: center;
    }
  }
  .el-menu-item {
    height: 48px;
    margin: 4px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    &:hover {
      background: rgba(16, 185, 129, 0.2);
      transform: translateX(4px);
    }
    &.is-active {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.2) 100%);
      color: #10b981;
      font-weight: 500;
    }
  }
  .publish-button {
    margin-top: 16px;
  }
  .menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
  }
}
:deep(.el-menu) {
  border: none;
}
:deep(.el-dialog__body) {
  padding: 0 20px;
}
:deep(.el-dialog__footer) {
  padding: 16px 20px;
}
</style>